<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由传值</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script> 
    <style>
        .toolbar ul{
            list-style: none;
        }
        .toolbar ul li{
            float: left;
            width: 150px;
        }
        .show{
            margin-top: 100px;
            width: 800px;
            height: 500px;
            background-color: gray;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="toolbar">
            <ul>
                <li><router-link to="/zb">专题直播</router-link></li>
                <li><router-link to="/jp">精品课程</router-link></li>
                <li><router-link to="/mf">免费课程</router-link></li>
                <li><router-link to="/st">随堂课程</router-link></li>
            </ul>
        </div>
        <div class="show">
            <router-view></router-view>
        </div>
    </div>
    <template id="zbtemplate">
        <div>
            <h1>专题直播</h1>
        </div>
    </template>
    <template id="jptemplate">
        <div>
            <h1>精品网课</h1>
        </div>
    </template>
    <template id="mftemplate">
        <div>
            <h1>免费课程</h1>
        </div>
    </template>
    <template id="sttemplate">
        <div>
            <ul>
                <li><router-link to="/st/1">成都教学视频</router-link></li>
                <li><router-link to="/st/2">西安教学视频</router-link></li>
                <li><router-link to="/st/3">重庆教学视频</router-link></li>
                <li><router-link to="/st/4">上海教学视频</router-link></li>
                <li><router-link to="/st/5">武汉教学视频</router-link></li>
            </ul>
        </div>
    </template>
    <template id="stDetailTemplate">
        <div>
            {{$route.params.id}} <br>
            {{arr[$route.params.id-1]}}
        </div>
    </template>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        router:new VueRouter({
            routes:[
                {
                    path:'/zb',
                    component:{
                        template:'#zbtemplate'
                    }
                },
                {
                    path:'/jp',
                    component:{
                        template:'#jptemplate'
                    } 
                },
                {
                    path:'/mf',
                    component:{
                        template:'#mftemplate'
                    }
                },
                {
                    path:'/st',
                    component:{
                        template:'#sttemplate'
                    }
                },
                {
                    path:'/st/:id',
                    component:{
                        template:'#stDetailTemplate',
                        data:function(){
                            return{
                                arr:[
                                    "成都教学视频详情",
                                    "西安教学视频详情",
                                    "重庆教学视频详情",
                                    "上海教学视频详情",
                                    "武汉教学视频详情"
                                ]
                            }
                        }
                    }
                }
            ]
        }),
        beforeCreate:function(){
            this.$router.push('/st/cd');
        }
    });
</script>